<template>
	<div>
		<form action="">
			<view class="item">
				<label for="">姓名：</label>
				<input type="text" @input="realnameInput" />
			</view>
			<view class="item">
				<label for="">性别</label>
				<radio-group name="sex" @change="sexChange">
					<label>
						<radio :value="1" checked="true" /><text>男</text>
					</label>
					<label>
						<radio :value="2" /><text>女</text>
					</label>
				</radio-group>
			</view>
			<view class="item">
				<picker mode="region"  @change="regionChange">
					<view>地址：<text v-for="(item,index)  in city">{{item}}</text></view>
				</picker>
			</view>
			<view class="item">
				<label for="">爱好：</label>
				<checkbox-group name="" @change="hobbyCheck">
					<label>
						<checkbox value="吃饭" /><text>吃饭</text>
					</label>
					<label>
						<checkbox value="睡觉" /><text>睡觉</text>
					</label>
					<label>
						<checkbox value="编程" /><text>编程</text>
					</label>
				</checkbox-group>
				
			</view>
			<view class="item">
				<label for="">简介：</label>
				<textarea value="" placeholder="请输入简介" @input="introInput" />
				
			</view>
			<view class="item">
				<button type="primary">提交</button>
			</view>
		</form>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				city:[],
				realname:"",
				sex:1,
				hobby:[],
				intro:""
			}
		},
		methods:{
			regionChange(e){
				this.city=e.detail.value;
			},
			// 输入用户姓名
			realnameInput(e){
				// console.log(e)
				this.realname=e.detail.value;
			},
			//选择性别
			sexChange(e){
				// console.log(e);
				this.sex=e.detail.value;
			},
			//选择爱好
			hobbyCheck(e){
				this.hobby=e.detail.value
			},
			//输入简介
			introInput(e){
				// console.log(e);
				this.intro=e.detail.value;
			}
		}
		
	}
</script>

<style scoped>
	input,textarea{
		border: 1rpx solid #333;;
	}
	.item{
		display: flex;
		margin: 10rpx;
	}

</style>